<template>
  <div>
    <el-button type="danger" icon="el-icon-arrow-left" round @click="allClick">播放全部<i class="el-icon-plus el-icon--right"></i></el-button>
    <el-button type="danger" icon="el-icon-folder-add" round @click="toolTip">收藏</el-button>
    <el-button type="danger" icon="el-icon-download" round @click="toolTip">下载</el-button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  props: ['list'],
  data() {
    return {};
  },
  methods: {
    ...mapMutations(['getSongsId', 'getPlayList']),
    //播放全部回调
    allClick() {
      if (this.list.length === 0) return this.$message.warning('该列表无歌曲');
      this.$confirm('播放全部将会替换当前播放列表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let list = this.list;
          //播放第一首歌曲
          this.getSongsId(list[0].id);
          //将歌单所有歌曲push到播放列表
          this.getPlayList(list);
          this.$message({
            type: 'success',
            message: '替换成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消替换',
          });
        });
    },
    //提示
    toolTip() {
      const h = this.$createElement;
      this.$notify({
        title: '温馨提示',
        message: h('i', { style: 'color: teal' }, '其实，这只是个摆设'),
      });
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
</style>